<template>
  <view>
    <view class="map">
      <!-- 	<map id="map_container" :include-points="markers" :latitude="latitude" :longitude="latitude"
				:polyline="polyline" :markers="markers" :scale="scale" /> -->
      <map
        id="map_container"
        :latitude="latitude"
        :longitude="longitude"
        :markers="markers"
        enable-3D="false"
        show-compass="false"
        enable-overlooking="false"
        :enable-satellite="false"
        :enable-traffic="false"
        :polyline="polyline"
        show-location="false"
        :scale="scale"
        :callouttap="markers.callout"
      />
    </view>
    <view class="bodys">
      <view class="">
        <p></p>
      </view>
    </view>
    <view class="footer">
      <view class="head">
        <text>{{ shipZone }}</text>
        <image src="../../static/iocn4.png" mode=""></image>
        <text>{{ receiveZone }}</text>
      </view>
      <view class="body1">
        <view class="body2">
          <view class="body2_2">
            <text>运单号: {{ waybillNumber }}</text>
            <text>货物名称: {{ goodsName }}</text>
            <text>车辆速度: {{ speed }}m/s</text>
            <text v-if="distance == undefined">距离终点: 0公里</text>
            <text v-else>距离终点: {{ distance / 1000 }}公里</text>
            <text>司机名称: {{ driverName }}</text>
          </view>
        </view>
        <view class="body3">
          <view class="body3_1">
            <image src="../../static/iocn10.png" mode=""></image>
            <text v-if="drivermobile == 'null'"> 暂无 </text>
            <text v-else>{{ drivermobile }}</text>
          </view>
          <view class="body3_2">
            <text @click="bohao">联系司机</text>
          </view>
        </view>
      </view>
    </view>
    <view class="view_nav" v-show="jiazaizhong">
      <view>
        <u-loading-icon size="50" color="#fff"></u-loading-icon
        ><text>定位中,请耐心等待</text>
      </view>
    </view>
  </view>
</template>

<script>
// import moment from "moment"; // 格式化时间 插件
import amap from "@/libs/amap-wx.js";
import {
  CreateSign,
  transTimeManageV3,
  GetNowPosition,
  GetTransTrack,
  CallRecordCreate,
  CreateAudio,
  distance,
} from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import { Transition } from "vue";
export default {
  data() {
    return {
      key: "e9f1231c3e04f846432856dafa4e0a97",
      amapPlugin: null,
      //中心点
      a: 0,
      latitude: 0,
      longitude: 0,
      shipLocation1: 0,
      shipLocation2: 0,
      receiveLocation1: 0,
      receiveLocation2: 0,
      time: "",
      current: 0,
      distance: 0, // 距离
      scale: 17,
      ditu: "",
      driverId: "",
      waybillId: "",
      shipZone: "",
      receiveZone: "",
      waybillNumber: "",
      goodsName: "",
      speed: "", //速度
      jiazaizhong: false,
      drivermobile: "",
      driverName: "",
      shiperId: "",
      fileName: "",
      //当前位置
      beforeonelat: 0,
      beforeonelon: 0,
      ponts: [],
      lengths: "",
      newAdreess1: {},
      newAdreess2: {},
      position: "",
      markers: [
        {
          //起点
          id: 0, // Number
          title: "0", // String-标注点名
          // rotate: 180, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0
          // 默认1，无透明，范围 0 ~ 1
          latitude: 0,
          longitude: 0,
          width: 30,
          height: 30,
          iconPath:
            "https://syh-2.oss-cn-shanghai.aliyuncs.com/icon_qidian.png", // 显示的图标
        },
        {
          //终点
          id: 1, // Number
          title: "1", // String-标注点名
          // rotate: 180, // Number - 顺时针旋转的角度，范围 0 ~ 360，默认为 0

          // 默认1，无透明，范围 0 ~ 1
          latitude: 0,
          longitude: 0,
          width: 30,
          height: 30,
          iconPath:
            "https://syh-2.oss-cn-shanghai.aliyuncs.com/icon_qidian.png", // 显示的图标
        },
        {
          //当前
          id: 2, // Number
          title: "1231231312312312312332", // String-标注点名
          alpha: 0,
          latitude: 0,
          longitude: 0,
          width: 30,
          height: 30,
          // iconPath: none, // 显示的图标
        },
        {
          //当前
          id: 3, // Number
          title: "123", // String-标注点名
          latitude: 0,
          longitude: 0,
          width: 30,
          height: 30,
          callout: {
            //自定义标记点上方的气泡窗口 点击有效
            content: "", //文本
            color: "#ffffff", //文字颜色
            fontSize: 14, //文本大小
            borderRadius: 15, //边框圆角
            borderWidth: "10",
            bgColor: "#EF4D3D", //背景颜色
            display: "ALWAYS", //常显
            padding: 10,
          },
        },
      ],
      arr: [],
      points: [],
      getpoints: [],
      polyline: [
        {
          points: [], // 点集合
          color: "#3591fc", // 线的颜色
          arrowLine: true, //带箭头的线
          width: 6, // 线的宽度
        },
      ],

      sign: "", //签名,
      titles: [
        {
          current: 0,
          title: "已装货",
          desc: "",
          place: "",
        },
      ],
    };
  },
  created: function () {
    // this.GetTransTrack()
  },
  onLoad(options) {
    this.amapPlugin = new amap.AMapWX({
      key: this.key,
    });
    this.mapCtx = uni.createMapContext("myMap");
    this.jiazaizhong = true;
    setTimeout(() => {
      this.jiazaizhong = false;
    }, 1000 * 12);
    console.log(options);
    this.shipLocation1 = options.shipLocation.split(",")[0];
    this.shipLocation2 = options.shipLocation.split(",")[1];
    this.receiveLocation1 = options.receiveLocation.split(",")[0];
    this.receiveLocation2 = options.receiveLocation.split(",")[1];
    this.markers[0].latitude = this.shipLocation1;
    this.markers[0].longitude = this.shipLocation2;
    this.markers[1].latitude = this.receiveLocation1;
    this.markers[1].longitude = this.receiveLocation2;
    this.titles[0].desc = options.time;
    this.waybillId = options.waybillId;
    this.driverId = options.driverId;
    this.shipZone = options.shipZone;
    this.receiveZone = options.receiveZone;
    this.waybillNumber = options.waybillNumber;
    this.goodsName = options.goodsName;
    this.driverName = options.driverName;
    this.drivermobile = options.drivermobile;
    this.shiperId = options.shiperId;
    this.project();
    this.onMarkerTap();
    this.getloc();
  },
  methods: {
    // 拨打电话
    bohao(e) {
      var phone = this.drivermobile;
      var item = e;
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {
          this.CallRecordCreate();
        },
        fail: (res) => {
          console.log("打电话失败了");
        },
      });
    },

    // 创建通话记录
    async CallRecordCreate() {
      var waybillId = this.waybillId;
      var driverId = this.driverId;
      var consignorId = this.shiperId;
      try {
        const { data: res } = await CallRecordCreate({
          waybillId,
          driverId,
          consignorId,
        });
      } catch (e) {}
    },

    async getloc() {
      setInterval(() => {
        // 授权成功后，调用getLocation选择信息
        uni.getLocation({
          type: "gcj02",
          isHighAccuracy: true,
          geocode: true,
          success: (res) => {
            //腾讯地图逆地址解析--获取城市信息
            uni.request({
              url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=LDXBZ-TTGRI-6CJGB-UNANB-J3CB7-G3FST`,
              success: (res) => {
                // console.log(res, 'res321'); //位置信息
                this.position = res.data.result.address;
              },
            });

            this.markers[2].latitude = res.latitude;
            this.markers[2].longitude = res.longitude;
            this.latitude = res.latitude;
            this.longitude = res.longitude;
            this.setCenterPoint(
              this.markers[0],
              this.markers[1],
              this.markers[2]
            );
            this.GetNowPosition();
          },
        });
      }, 15000);
    },
    //获取运输轨迹
    async GetNowPosition() {
      var waybillId = this.waybillId;
      try {
        const { data: res } = await GetNowPosition({
          waybillId,
        });
        console.log(res, "ponts");
        console.log(this.markers[3], "mark3");
        var latlng = JSON.parse(res.result.nowPosition);
        console.log(latlng);
        this.markers[3].latitude = latlng.latitude;
        this.markers[3].longitude = latlng.longitude;
        this.markers[3].callout.content = res.result.position;
        this.distance = res.result.distance;
        this.speed = res.result.speed;
      } catch (e) {}
    },
    //路线规划
    async project() {
      let that = this;
      uni.request({
        url:
          "https://apis.map.qq.com/ws/direction/v1/driving/?from=" +
          that.markers[0].latitude +
          "," +
          that.markers[0].longitude +
          "&to=" +
          that.markers[1].latitude +
          "," +
          that.markers[1].longitude +
          "&accuracy=30&output=json&callback=cb" +
          "&key=Y7PBZ-L36HJ-ZABFV-XJO35-CUPTT-DYBEX",
        success(res) {
          console.log(res, "规划");
          if (res.data.status == 0) {
            let coors = res.data.result.routes[0].polyline;
            for (let i = 2; i < coors.length; i++) {
              coors[i] = coors[i - 2] + coors[i] / 1000000;
            }

            var coors_new = []; //记住微信小程序声明一个数组这样写
            for (var j = 0; j < coors.length; j++) {
              coors_new.push({
                latitude: parseFloat(coors[j]),
                longitude: parseFloat(coors[j + 1]),
              });
              j++;
            }

            that.polyline[0].points = coors_new;
            console.log(that.ponts, "xinde");
          }
        },
      });
    },
    // 地图中心点 （计算3个点的中心点）
    setCenterPoint(start, end, beforeone) {
      console.log(this.markers[2]);
      this.longitude = beforeone.longitude;
      this.latitude = beforeone.latitude;
      this.scale = 17;
    },
    onMarkerTap() {
      //点击markers触发的方法
      let mapCtx = uni.createMapContext("map_container", this); // mapId对应地图id属性
      mapCtx.includePoints({
        padding: [70], // padding类似我们css中的padding，可以有四个值
        points: [
          {
            latitude: this.markers[2].latitude,
            longitude: this.markers[2].longitude,
          },
        ],
      });
    },

    //运单播报
    async CreateAudio() {
      var content = "您的运单还剩五公里即将到达";
      var format = "mp3";
      var voice = "xiaoyun";

      try {
        const { data: res } = await CreateAudio({
          content,
          format,
          voice,
        });
        this.fileName = res.result.fileName;
        this.ScanAudio();
        console.log(res);
      } catch (e) {}
    },
    async ScanAudio() {
      var music = null;

      music = uni.createInnerAudioContext(); //创建播放器对象

      music.src = this.fileName;

      music.play(); //执行播放

      music.onEnded(() => {
        //播放结束

        music = null;
      });
    },
  },
};
</script>

<style lang="scss">
.map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#map_container {
  width: 100%;
  height: 70%;
}

.footer {
  width: 100%;
  height: 28%;
  position: fixed;
  bottom: 40upx;
  background: #ffffff;

  .head {
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      white-space: nowrap;
      overflow: hidden;
      /* 内容超出宽度时隐藏超出部分的内容 */
      text-overflow: ellipsis;
    }
    image {
      width: 90upx;
      height: 90upx;
    }
  }

  .body1 {
    margin-top: 40upx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .body1_1 {
      border: 3px solid #cccccc;

      image {
        width: 180upx;
        height: 180upx;
      }
    }
  }

  .body2 {
    font-size: 32upx;
    width: 400upx;
    margin-left: -280upx;
    margin-top: -50upx;

    .body2_2 {
      display: flex;
      flex-direction: column;
      font-size: 28upx;
      color: #919191;

      text {
        padding: 12upx 0;
      }

      image {
        width: 90upx;
        height: 90upx;
      }
    }
  }

  .body3 {
    image {
      width: 40upx;
      height: 40upx;
    }

    .body3_1 {
      display: flex;
      align-items: center;
      padding: 10upx 10upx;
    }

    .body3_2 {
      text-align: center;
      border: 1px solid #ef4d3d;
      background-color: #ef4d3d;
      color: #ffffff;
    }

    border: 1px solid red;
    position: fixed;
    bottom: 200upx;
    left: 60%;
    font-size: 30upx;
    margin: 10upx;
    color: #ef4d3d;
  }
}

.view_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  // v-show="jiazaizhong"
  display: flex;
  align-items: center;
  justify-content: center;
  // view{
  // 	display: flex;
  // 	align-items: center;
  // 	justify-content: center;
  // 	position: absolute;
  // 	top: 50%;
  // 	left: 50%;
  // 	transform: translate(-50%, -50%);
  // }
}
</style>
